<template>
	<view>
		<u-navbar title="编辑个人资料" is-fixed
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<view class="contaier">
			<!-- 资料区域 -->
			<view style="text-align: center;">
				<button class="mini-btn change-avatar" size="mini" open-type="chooseAvatar"
					@chooseavatar="onChooseAvatar" plain="true">
					<image class="avatar" :src="avatar"></image>
				</button>
			</view>
			<view class="form">
				<view>
					昵称
					<input class="input" type="nickname" :value="nickname" @blur="onNickName" @change="onNickName" />
				</view>
				<view>
					生日
					<picker class="" mode="date" :value="borthiday" :start="startDate" :end="endDate"
						@change="bindDateChange">
						<view class="input">{{birthday}}</view>
					</picker>
				</view>
				<view>
					手机号
					<view class="input" style="display: flex; line-height: 120rpx; align-items: center;color: ;">
						<input style="width: 450rpx;" type="number" :value="mobile" disabled="true">
						<view style="font-size: 22rpx; color: #FE3057;" @click="toEditMobile">
							{{event=='changemobile'?'更换':'绑定'}}
						</view>
						</input>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	const app = getApp();

	export default {
		data() {
			return {
				nickname: '',
				birthday: '',
				avatar: '',
				mobile: '',
				form: {
					nickname: '', //昵称
					birthday: '',
					sex: '',
					mobile: '',
					avatar: '',
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				event: 'changemobile'
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {},
		async onShow() {
			await this.getUsrInfo()
		},
		methods: {
			onChooseAvatar(e) {
				let filePath = e.detail.avatarUrl;
				this.uploadFilePromise(filePath).then((res) => {
						this.$u.api.uploadAvatar({
								avatar: res
							}).then((resData) => {
								if (resData.code === 1) {
									this.$refs.uToast.show({title: resData.msg,type: 'success'});
								}else{
									this.$refs.uToast.show({title: resData.msg,type: 'error'});
								}
							})
					})
					.catch((err) => {
						this.$refs.uToast.show({title: '上传失败',type: 'error'});
					})
			},
			onNickName(e) {
				if (this.nickname !== e.detail.value) {
					this.nickname = e.detail.value
					this.$u.api.editUserInfo({
						nickname: e.detail.value
					}).then(res => {
						if (res.code == 1) {
							this.$refs.uToast.show({title: res.msg,type: 'success'});
						}else{
							this.$refs.uToast.show({title: res.msg,type: 'error'});
						}
					})
				}

			},
			uploadFilePromise(value) {
				
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '正在上传头像'
					})
					uni.uploadFile({
						url: 'https://www.yplm888.com/api/v1/user/upload',
						filePath: value,
						name: 'file',
						headers: {
							'Authorization': uni.getStorageSync('token')
						},
						success: (uploadFileRes) => {
							const resData = JSON.parse(uploadFileRes.data)
							uni.hideLoading()
							if (resData.code === 1) {
								this.avatar = resData.data.fullurl
								resolve(resData.data.fullurl)
							} else {
								reject(resData)
							}
						},
						fail: () => {
							uni.hideLoading()
							reject()
						}
					})
				})
			},
			//接收 avatarUrl / nickName 
			completeMemberInfo(url) {},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 获取用户信息
			async getUsrInfo() {
				await this.$u.api.getUserInfo().then(res => {
					this.event = res.data.mobile ? 'changemobile' : 'bind';
					this.mobile = res.data.mobile;
					this.birthday = res.data.birthday;
					this.nickname = res.data.nickname;
					this.avatar = res.data.avatar;
				})
			},
			bindDateChange(e) {
				this.birthday = e.detail.value
				this.$u.api.editUserInfo({
					birthday: e.detail.value
				}).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({title: res.msg,type: 'success'});
					}else{
						this.$refs.uToast.show({title: res.msg,type: 'error'});
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 100;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getTime() {
				let dateObj = new Date();
				let yy = dateObj.getFullYear();
				let mm = dateObj.getMonth() + 1;
				let dd = dateObj.getDate();
				let hh = dateObj.getHours();
				let mf = dateObj.getMinutes() < 10 ? '0' + dateObj.getMinutes() : dateObj.getMinutes();
				let ss = dateObj.getSeconds() < 10 ? '0' + dateObj.getSeconds() : dateObj.getSeconds();
				return yy + mm + dd + hh + mf + ss;
			},
			
			toEditMobile() {
				uni.navigateTo({
					url: '/packageB/pages/edit_user/editMobiel/editMobiel?event=' + this.event
				})
			}
		}
	}
</script>

<style lang="scss">
	.contaier {
		padding: 10rpx 10rpx;
		width: 100%;
		// border-radius: 25rpx;
		// box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);

		.form {
			padding: 20rpx;
			font-size: 30rpx;

			.input {
				line-height: 80rpx;
				padding: 0 20rpx;
				margin: 10rpx 0;
				border-radius: 40rpx;
				height: 80rpx;
				background-color: #f5f5f5;
			}
		}
	}

	button[plain] {
		border: 0
	}

	.change-avatar {
		background-color: none;
		margin: 0 auto;
	}

	.pass-login-btn {
		width: 70%;
		font-size: 30rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		background-color: #FE3057;
	}

	.main {}

	.save-btn {
		color: #3BDCA8;

	}

	.save-btn2 {
		color: #3BDCA8;
		margin-top: 70rpx;

	}

	.avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		margin: 10rpx auto;
		border: 1rpx solid #969696;
		box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.avatar-wrap {
		margin-top: 20rpx;
		width: 150rpx;
		height: 150rpx;
		display: inline-block;
		margin-bottom: 0rpx;
		position: relative;

		.icon {
			position: absolute;
			bottom: 25rpx;
			right: 15rpx;
		}
	}

	.user-avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.tishi {
		display: block;
		font-size: 18rpx;
		color: #969696;
	}

	.nickname-wrap {
		border-bottom: 2rpx solid #969696;
		width: 50%;
		height: 60rpx;
		margin: 0 auto;
	}
</style>